<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.banner {
				width: 500px;
				height: 400px;
				border: #FFA500 solid 1px;
				background-color: #FAEBD7;
				margin: 100px auto;
				position: relative;
			}

			ul {
				width: 500%;
				height: 100%;
				position: absolute;
				left: 0px;
				top: 0px;
			}

			li {
				height: 100%;
				width: 500px;
				font-size: 100px;
				color: #ffaaff;
				line-height: 400px;
				text-align: center;
				float: left;
			}

			.banner div {
				width: 100%;
				height: 60px;
				position: absolute;
				top: 50%;
				margin-top: -30px;
			}

			.banner div p {
				float: left;
				width: 40px;
				height: 100%;
				line-height: 60px;
				text-align: center;
				font-size: 30px;
			}

			.banner div p:last-child {
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<ul class="box">
				<li style="background-color: red;">1</li>
				<li style="background-color: yellow;">2</li>
				<li style="background-color: blue;">3</li>
				<li style="background-color: green;">4</li>
				<li style="background-color: gold;">5</li>
			</ul>
			<div>
				<p><a href="javascript:void(0)" id="left"> &lt; </a></p>
				<p><a href="javascript:void(0)" id="right"> &gt; </a></p>
			</div>
		</div>
		<script type="text/javascript">
			let index = 0;
			
			$('#right').click(function() {
				index--;
				$('.box').animate({
					left: -index * $('.banner').width()
				}, 1000, end)
			})
			
			
			$('#left').click(function() {
				index++;
				$('.box').animate({
					left: -index * $('.banner').width()
				}, 1000, end)
			})

			function end() {
				if (index > $('li').length) {
					index = 0;
				}
			}
		</script>
	</body>
</html>
